<script lang="ts">
import { defineComponent, ref, watch, reactive } from "vue";
import { UserModule } from "@/store/modules/user";
import { getUserInfo, getParameter, getSendList, send } from "@/api/nodeapi";
import { showToast, showDialog, showConfirmDialog } from "vant";
import { useI18n } from "vue-i18n";

export default defineComponent({
    setup() {
        const { t } = useI18n();
        const referrer = ref();
        const active = ref(0);
        const active2 = ref(0);
        const pageLoading = ref(true);
        const loading2 = ref(false);
        const address = ref();
        const amount = ref();
        const userInfo = ref({});
        const parameter = ref({});
        const setat = reactive({
            pageNum: 1,
            pageSize: 10,
            total: 0,
        });
        const refreshing = ref(false);
        const loading = ref(true);
        const finished = ref(false);
        const list: any = ref([]);
        const onRefresh = () => {
            // setat.pageNum = 0;
            // finished.value = false;
            // loading.value = true;
            // refreshing.value = true;
            onLoad();
        };
        const onLoad = async () => {
            const res = await getSendList({
                pageNum: setat.pageNum - 1,
                pageSize: setat.pageSize,
                tokenType: 5,
            });
            list.value = res.data.data.SendList || [];
            setat.total = res.data.data.Total;
            loading.value = false;
            // list.value = [
            //     {
            //         Id: 1,
            //         Reward: 100,
            //         CreatedAt: "2025-06-26",
            //         FromAddress: "TFM66dwYagys4Bbn5Qhk58KPp49Jf7bw2i",
            //         ToAddress: "TFM66dwYagys4Bbn5Qhk58KPp49Jf7bw2i",
            //         TokenType: 1,
            //         Amount: 100,
            //         Status: 1,
            //     },
            //     {
            //         Id: 2,
            //         Reward: 100,
            //         CreatedAt: "2025-06-26",
            //         FromAddress: "THNHoTzHQBVXFGvJoSERsaNQcZ5w16Le88",
            //         ToAddress: "TFM66dwYagys4Bbn5Qhk58KPp49Jf7bw2i",
            //         TokenType: 1,
            //         Amount: 100,
            //         Status: 2,
            //     },
            //     {
            //         Id: 3,
            //         Reward: 100,
            //         CreatedAt: "2025-06-26",
            //         FromAddress: "TFM66dwYagys4Bbn5Qhk58KPp49Jf7bw2i",
            //         ToAddress: "TFM66dwYagys4Bbn5Qhk58KPp49Jf7bw2i",
            //         TokenType: 1,
            //         Amount: 100,
            //         Status: 3,
            //     },
            // ];
        };

        const onSubmit = async () => {
            // if (!address.value) return;
            if (!amount.value) return;
            if (Number(amount.value) < parameter.value.SendMin) {
                showToast(
                    t("layout.MinimumWithdrawal") + parameter.value.SendMin
                );
                return;
            }
            loading2.value = true;
            await referrer.value.loadVerifyToken(true);
            loading2.value = false;
            showConfirmDialog({
                title: t("layout.Withdrawal"),
                beforeClose: async function (action: string): Promise<boolean> {
                    if (action === "confirm") {
                        try {
                            const res = await send({
                                tokenType: active.value,
                                amount: amount.value,
                            });

                            if (res.data.code == 20) {
                                showDialog({ title: `${t("layout.success")}` });
                                address.value = "";
                                amount.value = "";
                            } else {
                                showToast({
                                    message: res.data.message,
                                    icon: "clear",
                                    className: "_showToast2",
                                    position: "top",
                                });
                            }
                            loadData();
                            onRefresh();
                        } catch (params: any) {}
                        return false;
                    } else {
                        return true;
                    }
                },
            }).catch(() => {});
        };
        const loadData = async () => {
            try {
                getUserInfo().then((res) => {
                    userInfo.value = res.data.data.UserInfo || {};
                });
                getParameter().then((res) => {
                    parameter.value = res.data.data.Parameter || {};
                });
                pageLoading.value = false;
            } catch (error) {}
        };
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                    onRefresh();
                }
            },
            { immediate: true }
        );
        return {
            referrer,
            active,
            active2,
            address,
            amount,
            userInfo,
            pageLoading,

            list,
            setat,
            refreshing,
            finished,
            onRefresh,
            onLoad,
            loading,
            onSubmit,
            loading2,
        };
    },
});
</script>

<template>
    <div class="main2">
        <div class="page">
            <van-form @submit="onSubmit">
                <van-tabs v-model:active="active" class="tabsNav">
                    <van-tab title="USDT" :name="0"> </van-tab>
                    <van-tab title="TBK" :name="2"> </van-tab>
                    <van-tab title="TRX" :name="3"> </van-tab>
                </van-tabs>
                <div class="balance" v-if="active == 0">
                    <div class="label">
                        <img
                            src="@/assets/image/USDT.svg"
                            alt=""
                            srcset=""
                        />USDT
                    </div>
                    <div class="value">
                        <span>{{ $t("layout.Balance") }}</span
                        >{{ userInfo.USDT || 0 }}
                    </div>
                </div>
                <div class="balance" v-else-if="active == 2">
                    <div class="label">
                        <img src="@/assets/logo3.png" alt="" srcset="" />TBK
                    </div>
                    <div class="value">
                        <span>{{ $t("layout.Balance") }}</span
                        >{{ userInfo.TBK || 0 }}
                    </div>
                </div>
                <div class="balance" v-else>
                    <div class="label">
                        <img src="@/assets/logo3.png" alt="" srcset="" />TRX
                    </div>
                    <div class="value">
                        <span>{{ $t("layout.Balance") }}</span
                        >{{ userInfo.TRX || 0 }}
                    </div>
                </div>
                <div class="inputBlock">
                    <!-- <van-field v-model="address" placeholder="请输入地址" /> -->
                    <div class="name">{{ $t("layout.Amount") }}</div>
                    <div class="input-box">
                        <van-field
                            v-model="amount"
                            :placeholder="$t('layout.Pleaseenterquantity')"
                        />
                        <div
                            class="max"
                            @click="amount = userInfo.USDT"
                            v-if="active == 0"
                        >
                            MAX
                        </div>
                        <div
                            class="max"
                            @click="amount = userInfo.TBK"
                            v-else-if="active == 2"
                        >
                            MAX
                        </div>
                        <div class="max" @click="amount = userInfo.TRX" v-else>
                            MAX
                        </div>
                    </div>
                </div>
                <van-button
                    round
                    block
                    type="primary"
                    :disabled="pageLoading"
                    native-type="submit"
                    :loading="loading2"
                >
                    {{ $t("layout.confirm") }}
                </van-button>
            </van-form>
            <div class="listTitle">{{ $t("layout.ExtractRecords") }}</div>
            <div class="list">
                <div class="head">
                    <span>{{ $t("layout.ExtractionTime") }}</span>
                    <span>{{ $t("layout.Amount") }}</span>
                    <span>{{ $t("layout.state") }}</span>
                </div>
                <ul>
                    <li v-for="(item, index) in list" :key="index">
                        <div>
                            {{ item.CreatedAt }}
                        </div>
                        <div>
                            -{{ item.Amount }}
                            {{ ["USDT", "VTBK", "TBK", "TRX"][item.TokenType] }}
                        </div>
                        <div>
                            <span
                                class="status"
                                :class="'status' + item.Status"
                            >
                                {{
                                    $t(
                                        `layout.${
                                            [
                                                "AwaitingReview",
                                                "Withdrawalinprogress",
                                                "Withdrawalinprogress",
                                                "WithdrawalFailed",
                                                "WithdrawalSuccessful",
                                                "WithdrawalRejected",
                                            ][item.Status]
                                        }`
                                    )
                                }}</span
                            >
                        </div>
                    </li>
                </ul>
                <list-finished v-if="!loading && list.length == 0" />
                <div class="pagination">
                    <van-pagination
                        v-model="setat.pageNum"
                        :total-items="setat.total"
                        :show-page-size="3"
                        :items-per-page="setat.pageSize"
                        force-ellipses
                        @change="onRefresh"
                    >
                        <template #prev-text>
                            <van-icon name="arrow-left" />
                        </template>
                        <template #next-text>
                            <van-icon name="arrow" />
                        </template>
                    </van-pagination>
                </div>
            </div>
        </div>
    </div>
    <referrer-2
        ref="referrer"
        @load="loading2 = false"
        @cross="loading2 = false"
    />
</template>

<style lang="less" scoped>
.page {
    .van-form {
        padding: 24px;
        border-radius: 20px;
        border: 1px solid #d9d9d9;
        .tabsNav {
            &:deep(.van-tabs__wrap) {
                height: 60px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 8px;
                overflow: hidden;
                .van-tabs__nav {
                    background: transparent;
                    gap: 20px;
                }
                .van-tab {
                    color: #000;
                    font-size: 20px;
                    border-radius: 10px;
                    border: 1px solid #d9d9d9;
                    &.van-tab--active {
                        color: #eb0029;
                        border: 1px solid #eb0029;
                    }
                }
                .van-tabs__line {
                    display: none;
                }
            }
        }
        .balance {
            margin-top: 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .label {
                display: flex;
                align-items: center;
                font-size: 36px;
                font-weight: 400;
                img {
                    width: 50px;
                    margin-right: 8px;
                }
            }
            .value {
                color: #eb0029;
                font-size: 36px;
                font-weight: 900;
                text-align: right;
                span {
                    display: block;
                    color: #000;
                    font-size: 20px;
                    font-weight: 400;
                }
            }
        }
        .inputBlock {
            margin-top: 13px;
            .name {
                padding-top: 40px;
                margin-bottom: 20px;
                color: #000;
                font-size: 20px;
                font-weight: 700;
            }
            .van-field {
                padding: 0;

                background: transparent;

                &::after {
                    display: none;
                }
                &:deep(input) {
                    font-size: 16px;
                    height: 60px;
                    padding: 0 20px;
                    color: #000;
                    border-radius: 10px;
                    border: 1px solid #d9d9d9;

                    &::-webkit-input-placeholder {
                        color: #949494;
                    }
                    &:-moz-placeholder {
                        color: #949494;
                    }
                    &::-moz-placeholder {
                        color: #949494;
                    }
                    &:-ms-input-placeholder {
                        color: #949494;
                    }
                    &:focus {
                        border: 1px solid #eb0029;
                        background: #fff7f7;
                    }
                }
            }
            .input-box {
                display: flex;
                align-items: center;
                .max {
                    margin-left: 12px;
                    width: 80px;
                    height: 60px;
                    flex-shrink: 0;
                    line-height: 60px;
                    text-align: center;
                    font-weight: 500;
                    font-size: 20px;
                    color: #eb0029;
                    border-radius: 10px;
                    border: 1px solid #eb0029;
                    cursor: pointer;
                }
            }
        }
        .van-button {
            margin-top: 40px;
            border-radius: 10px;
        }
    }
    .listTitle {
        margin-top: 72px;
        color: #000;
        font-size: 20px;
        font-weight: 700;
    }
    .list {
        margin-top: 22px;
        border-radius: 20px;
        border: 1px solid #d9d9d9;
        overflow: hidden;
        background: #fff;
        .head {
            padding: 25px 0;
            display: flex;
            background: #f8f8f8;
            text-align: center;
            span {
                flex: 1;
                color: #000;
                font-size: 16px;
                font-weight: 700;
            }
        }
        ul {
            li {
                padding: 22px 0;
                display: flex;
                text-align: center;
                border-bottom: 1px solid #d9d9d9;
                div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex: 1;
                    color: #000;
                    font-size: 16px;
                    font-weight: 400;
                    .img {
                        margin-left: 8px;
                        width: 20px;
                        height: 20px;
                    }
                    &.address {
                        color: #3b82f6;
                    }
                    .status {
                        display: inline-block;
                        padding: 4px 16px;
                        line-height: 18px;
                        color: #17c580;
                        border-radius: 30px;
                        min-width: 96px;
                        box-sizing: border-box;
                        &.status4 {
                            color: #17c580;
                            background: rgba(54, 183, 145, 0.3);
                        }
                        &.status0,
                        &.status1,
                        &.status2 {
                            color: rgba(60, 113, 251, 1);
                            background: rgba(60, 113, 251, 0.3);
                        }
                        &.status3,
                        &.status5 {
                            color: rgba(233, 57, 57, 1);
                            background: rgba(233, 57, 57, 0.3);
                        }
                    }
                }
            }
        }
        .pagination {
            padding-top: 50px;
            text-align: right;
            padding-right: 10px;
            .van-pagination {
                display: inline-block;
            }
        }
    }
    @media (max-width: 1000px) {
        & {
            .van-form {
                padding: 24px;
                border-radius: 20px;
                border: 1px solid #d9d9d9;
                .tabsNav {
                    &:deep(.van-tabs__wrap) {
                        height: 48px;
                        .van-tabs__nav {
                            gap: 10px;
                        }
                        .van-tab {
                            font-size: 16px;
                            .van-tab__text--ellipsis {
                                display: inline;
                            }
                        }
                    }
                }
                .balance {
                    justify-content: center;
                    .label {
                        font-size: 16px;
                        img {
                            width: 24px;
                        }
                    }
                    .value {
                        display: flex;
                        align-items: center;
                        font-size: 20px;
                        font-weight: 900;
                        text-align: left;
                        span {
                            margin-right: 12px;
                            font-size: 16px;
                        }
                    }
                }
                .inputBlock {
                    margin-top: 11px;
                    .name {
                        padding-top: 24px;
                        margin-bottom: 12px;
                        font-size: 16px;
                    }
                    .van-field {
                    }
                    .input-box {
                        display: flex;
                        align-items: center;
                        .max {
                            margin-left: 4px;
                            width: 60px;
                            height: 60px;
                            font-size: 16px;
                        }
                    }
                }
                .van-button {
                    margin-top: 32px;
                }
            }
            .listTitle {
                margin-top: 60px;
                font-size: 16px;
            }
            .list {
                .head {
                    padding: 20px 0;
                    span {
                        font-size: 14px;
                        font-weight: 700;
                    }
                }
                ul {
                    li {
                        padding: 15px 0;
                        div {
                            font-size: 12px;
                            svg {
                                width: 12px;
                                height: 12px;
                            }
                            .status {
                                min-width: auto;
                            }
                        }
                    }
                }
                .pagination {
                }
            }
        }
    }
}
</style>
